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اعزائی واخوانى فى أكاديمية 
GFX‏ 


أقدم لكم کتابي: 
العبقري فى الفرونت بيج 


إن شاء الله هذا الكتاب سوف يكون عبارة عن مقدمة بسيطة لدخول 
عالم تصميم وبرمجة المواقع 
هذا الكتاب اهداء الى 
أ/ وليد المعداوى . م/ احمد عبد الرحمن. محمد حسام البنا 
محمود عاطف أبو النجا . محمود عنتر . اسلام عنتر 
احمد كمال . خالد محمود . محمد عبد الفتاح السقا 
ابراهيم المرتضی . ابراهيم غنيم . ايمن مختار 
وكل اعضاء وزوار اكاديمية 
Gfx‏ 
واعتذر ان لم اذكرهم فى الأهداء 


ما هو الذى سوف نستفيدة من هذا الكتاب ؟ 


ان شاء الله سوف يكون هذا الكتاب كمقدمة لكل شخص يريد دخول 
عالم تصميم وبرمجة المواقع ويريد التميز والأبداع فية 
ويرد ان يكون له شان عظيم في هذا العلم. 


من هو مؤلف الكتاب ؟ 
مؤلف الكتاب هو زياد عبدة محمد المرتضى 
مشرف اكاديمية تصميم المواقع گی اكاديمية 
GfX‏ 


ما الذى سوف يفيدنا بة هذا الكتاب ؟ 
ان شاء الله سوف تتعلمون فى هذا الكتاب 
طرق تصميم وبرمجة المواقع بالفرونت بيج 
وفى الجزء الثانى من الكتاب 
سوف تتعلمون تصميم المواقع بالفوتوشوب وغيرها من البرامج 


الفهرس : 

طرق تصميم المواقع بالفرونت بيج 
وتنقسم الى اربعة فصول 

تعلم كل شئ عن الفرونت بيج 
أساسيات تصميم المواقع 

احترف الفرونت بيج 

طرق نشر الموقع على الأنترنت 


الفصل الأول : تعلم كل شئ عن الفرونت بيج 


كما قلت سابقا اننا فى هذا الكتاب سوف نتعلم طرق تصميم 
المواقع بالفرونت بيج 
لذالك اول ما عليكم معرفتة هو 
ما هو برنامج الفرونت بيج ؟ 


برنامج الفرونت بيج هو احد البرامج التى أصدرتها شركة 
مایکروسوفت . 


هل البرنامج يصعب التعامل معة ؟ 


برنامج الفرونت بيج كما قلت سابقا اصدرتها شركة ما يكرسوفت 
لذالك منحتة واجهة و قوائم برنامج مايكرسوفت ورد ولكن 
باختلاف بسيط 


من اين يمكننا تحميل البرنامج ؟ 
کک تحن فراع من اراب بال 


http://adf.ly/830071/http://www.almakan.org/f 
iles/F-Arabic.zip 


بالصفحة السابقة وضعت بعض الأسئلة التى يمكن ان يسئلها 


اما الان فقد حان وقت الشروحات 


طريقة تسطيب برنامج الفرونت بيج : 
. الموضوع 
بعد الانتهاء من تحميل البرنامج وفك الضغط عن البرنامج باستعمال -2 
WinRar‏ 
وبداخله ملفات ( Aric‏ 2003 عو ۲۴ا۴ ) سنجد مجلد باسم 
م : والذي يهمنا هو ملف اسمه 


...ودع البرنامج یثبت نفسه 6۴E P٥.E×€‏ ابداً بالضغط على 


OELEAN.DLL +: يلJlzd|‎ sIرږجٹتلا‎ 


EN 
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E 
ا ا‎ Product Key 


في المربجات ادناه اكتب بع إعال ذ۴ إمفتاح المنجعا المكون من 25 حرط. ستجد هذا 
الرقم على الملصق الموجود على الجانب الخلفي من علبة القرص المضخوط أو على 
er kificake oF Authenticity‏ شاد اللاصالة), 


إلخاء الأضصر 


.في هذه الخطوة دع الخيارات كما هي ثم اضغط التالي 
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E Microsoft Office FrontPage 2003 

L 
EJ 

نوج التتبيت ا ا 


الو صت 

بیت نمودذجي Microsoft Fc Fron tFPagE îi‏ بالمتونات 

کے الميزات اللآضافية عند الاستخدام الأول او 
إضافعا لاحقا عبر "لإفافةالزالة البرامجح" في 

0 تثبیت تام لوحة التحكم, 

BER N 


أو اختر نوها خر 


تتبیت إلى : 


1 Prggrarm Files\Microsoft Office’ 


استجراضی... 
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Microsoft Office FrontPage 2003 


وک الخطوه الاخيره اضغط على انهاء فقط 


Microsoft Office FrontPage 27003 slazع]‎ E 3 ×) 


Microsoft Office FrontPage 2003 


اتتمال الاعداد 


zl Microsoft Office FrontPage 2003 ali] نھ‎ 


قد تتوفر تحديتات أو متفات [إضافية عبر الإاتترنت. حدد المربح أحناة لزبارة موقح ع#عا۴۴ بواس طة 
التستجرضى بجذ انننهاء بزنامج اللاعغذاذ, 


تحقق عبر هب من وجود تحديثات وعمليات تحميل لضافية 


تم أثناء الإعداد نسخ ملفات نثبیت ۴۲۵٣۲۴۵۹8‏ إلى مجرك الأقراص :. يمن أن يوفر حذف 
شذه الملفات 144 مبخغا بايت تقريياآً من مساحة القزصء ولكن ينضح بالاحتغاغ بها للمساعدة في 
صسبانة ۴۲۵۳٣۳۴398‏ وتجنیته. 


| حذف صفات التتبيت 


انتهينا الأن ن مرحلة التثبيت 
نأتى لمرحلة فهم البرنامج 


Microsoft FrontPage, = 


زیر عرض لذباج تنسنق چدوله بباناته إطارات إطار 


1 
٤2 


Microsofi Office Picture Manager‏ - تحرير الصور المحددة 8ا 


E 


e 


آ اكب سال للعليمات 
Herci‏ 3 
ES See Oniine‏ 


Microsoft Office Online 4 Jail ® 

# الحصول على أخز الأخبار حول 
FrontPage pliziwl‏ 

تجنيت هذه القائمة تلقاثيا صن الويب 


¡ الوت والس طوع تلقاثاً للضصور 
نے انقر قوف ت جبح تلقاثي . 


ج تلقاثي 
متال؛ "طباعة أكثر من نسخة واحدة" 
ستتدام قذة الذذوات : : 


سطوع والتباين 
و موافح ويب 

My Web Sites 
نضاض‎ 


آکند... 


نذازة وانجتاس 


2 صفشخات 
لة الحين | أ 
لحين الخضصر shomthread. php‏ 


فا قد 


8 إنشاء صفجة جحيدة أو موقح جحيد... 


هذة هى واجهة برنامج الفرونت بيج 
وكما ترون فالعمل علية بسيط جدا 


تصميم المواقع بالفرونت بيج : 
تصميم المواقع بالفرونت بيج يكون عن طريق الكتابة والنسخ 


واللصق 
ليس عن طريق البرمجة وغيرها لذالك نسميها تصميم المواقع وليس 
برمجة المواقع 


هكذا نكون انتهينا من الفصل الأول 


الفصل الثانى : اساسيات تصميم المواقع 


هنالك ثلاثة طرق لعمل المواقع الإلكترونية : 
عليكم ان تعرفوها من سبيل العلم فقط 
إنه نظام خاص بالنص المجرد الذي يمكِتّك من : (اصا1]) نظام 
وبالإمكان النظر إلى هذا النظام على . صياغة صفحة الكترونية 
. أنه لغة البرمجة الخاصة بالإنترنت 
انه يوفر الوسائل والطرق المختصرة : (Html)‏ محرر لعَة ال 
. خاصة بالإنترنت (1ص] ) لصياغة وتحرير صفحات ال 
وڊرaliج )Expression Web/Dreamweaver)‏ برنامج 
تمكنك هذه البرامج من عمل صفحات خاصة (WYSIWYG)‏ 
ويحظى برنامج ال (1اص)1) بالإنترنت دون الحاجة إلى برنامج 
بميزة التشغيل المباشر على الكومبيوتر المركزي أي لا حاجة لنقل 
التصميم : 
عند تصميم الموقع عامل جمهورك بأحترام 
بمعنی مثلا انا اريد ان اصمم موقع لمحبى كرة القدم 
وانا متلا اشجع فريق الزمالك ليس على التعصب لفريقى هذا داخل 
ۆقڭى , 
اجعل دائما مسار موقعك هادف وبسيط ويجذب الناس الية 


ما معنى الموقع الهادف ؟ 
الموقع الهادف هو الموقع الذى لة هدف يريد تحقيقة مثل طموح 
هدف معين مثل ان يكون اكثر الكواقع تنسيقا على الأطلاق 
| وان يكون الموقع افضلهم من حيث المضمون 


اهم المبادئ التى سوف نسير عليها : 
ان يكون موقعك مضمونة خالی من ای تزوير 
ونظیف من ای نقل . 
ان تتجنب الخطوط المائلة لأنها تصعب قرائتها احيانا . 
تجنب وضع خط تحت الكلمات العادية لأن الزوار والأعضاء سوف 
يحسبو نها رابط تشعبی . 


هكذا نكون انتهينا من الفصل الثانى 


سهل شراء هيکل جاهز بأعمد e‏ تم م تیدا في 
د - ان الهيكل او ( القالب ) يعمل مقاب ا الذي 
صفحة الويب » الأمر الذي يت يتيح لك إظهار العمل 


. بالشكل الذي تريد 

القوالب نوعان هما قوالب الصفحات وقوالب المواقع 

قوالب المواقع 

من قائمة ملف حدد خيار جديد يظهر لك مربع حوار يمين الشاشة 
اختر منه قوالب موقع ويب أخرى ‏ _, | 

وتكون هذه القوالب على شكل هياكل فارغة يمكنك من إنشاء أنواع 

معينة من مواقع الويب › كما يحتوي فرونت بيج على المعالجات › 

هذه المعالجات عبارة عن قوالب تلقائية تستفيد منها في إنشاء مواقع 

.ويب أكثر تعقيداً 


: الشكل يكون كالتالى 


ملف تخير عرض لدراج تنسيق أدوات جدود بينات إطارات إطار تحليمات اگتب سؤالا للتعلیمات 8 


صوچ ابد تی ویب 
موقع ويب ذو صفحة واحدة... 
E‏ موقع فرق اتاد ۴8۴ةhاد...‏ 
هلول حزمة ويب ... 
قوالب موقع وب آخرع... 
قوالب 
البخت عبر الإلترنت عن؛ 


انتقال 
توا ژJآJ Office Online‏ 
القوالب الصستخدهة هخر 
موقع ويب شخصي 


EE‏ 8 موقد وب البجید ا تقاريد "نشل ك ابتباطات تشعبية © مهاد 


:استخدام قالب معالج الويب 
: لاستخدام قالب بسيط في إنشاء موقع ويب › قم بما يلي 


. من قائمة ملف › حدد الخيار جديد ثم قوالب موقع ويب أخرى 
.حدد نوع القالب الذي تريد استخدامه 


حدد المجلد أو الدليل الذي تريد أن تنشئ فيه موقع الويب ثم انقر 
. زر موافق 
يقوم فرونت بيج بإضافة صفحة آو أکثر إلى موقع الويب بعد تحديد 
.أي قالب من القوالب ما عدا قالب موقع ويب فارغ 
:استخدام القوالب لإنشاء أنواع مختلفة مشن صفحات الويب 
yT‏ المواقع › تمثل قوالب الصفحات أيضاً هياكل فارغة 
كنك استخدامها لإنشاء صفحات الويب داخل موقعك › أيضاً يمكنك 
إنشاء أي عدد من صفحات الويب پاستخدام القوالب الخاصة بها 
| قوالب الصفحة 


0 


الفوتوغرافية 


يعرض فرونت بيج نموذجاً بسيطاً لكل قالب صفحة قبل أن تقو 


خير ر درا E‏ صفوف 
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. لإدراج عمود أو اثر ف في لجدول 
عدد الصفوف أو الأعمدة التي تريد إضافتها إلى الجدول . 
أسفل جزء -6. يمكنك إضافة من 1 إلى 1000 صف أو عمود 
الموقع › حدد إذا ما كنت تريد إضافة الصفوف إلى أعلى أو أسفل 
انقر زر . الخلية ( التحديد ) التي يوجد بها مؤشر الكتابة حالياً 
مو افق لإنهاء عملية الإضافة وإغلاق مربع الحوار › سيظهر الجدول 


| ا اا 
]ااا 
: إضافة جدول داخل جدول ٠‏ 

إضافة لإمكانية إضافة خلايا أو أعمدة أو صفوف إلى الجدول › يتيح 

لك فرونت بيج أيضاً إضافة جدول جديد إلى الجدول الحالي › قم 


ببساطة بتحديد الخلية التي تريد أن تضيف إليها الجدول الجديد ثم 
: تقسيم الخلايا. اتبع الخطوات السابق ذكرها لعملية إدراج جدول 

قد ترغب أحياناً بتقسيم الخلية إلى عدة خلايا ويبين ( الشكل3 -5 ) 

. مثالا على ذلك 

: التقسيم الخلية الواحدة إلى خليتين أو أكثر 

من قائمة جدول › . حدد الخلية التي تريد تقسيمها بالنقر داخلها 

حدد نوع ., اختر أمر تقسيم الخلايا لتفتح مربع حوار انقسام الخلايا 

حدد عدد الأعمدة أو . التقسيم الذي تريده › إلى أعمدة أو صفوف 

الصفوف الذي تريد أن تنقسم إليه الخلية المحددة › في الوضع 

-5. 100الافتراضي ٠‏ يتم تحديد 2 › وأقصى عدد يمكنك تحديده هو 

انقر زر موافق لإغلاق مربع الحوار وتقسيم الخلايا 

| ل ]11 
ا 


دمج الخلايا 

حدد الخلية الأولى التي تريد أن تدمج فيها بقية الخلايا ثم ضع 
مضغوطاً ثم حدد #نط؟ احتفظ بمفتاح -2 . مؤشر الكتابة بداخلها 
الخلية المجاورة التي تريد أن تدمجها بالخلية السابقة المحددة 
ستظهر الخليتان بلون مميز الشكل 


من قائمة جدول اختر أمر دمج الخلايا وسيتم دمج الخلايا التي 
حددتها في خلية واحدة الشكل 


سے 
ا 
E‏ 


حتى الأن التعامل مع برنامج الفرونت بيج سهل وسيبقى سهل طيلة 
باقی الدروس ان شاء الله 


نأتی الأن للدروس الأهم فى برنامج الفرونت بيج . الدروس التى 
يجب عليك فهمها جيدا وحفظها 
اکید انتم تعبتم وانا کمان اذھبوا واحتسوا کوب شای او قھوة 
وعودوا بعد قلیل 


شرح ادراج صورة فى برنامج الفرونت بيج 


اولا : نضغط على زي ادراج ومن ثم نضغط على صورة ونختار من 
ملف اذا كانت الصورة لديك على الجهاز 
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أدوات جدود بیانات اطارات إطار تعليمات 


P2 


| :12نقطة) ”ج 
التاويخ والوفت ... کل ت 


... Web Component 


SD OAS ASU VES ASUS Î قاعدة بیانات‎ 


CHE 
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EEE 


¥ My Computer 
my Network Places 


| All Pictures 


الفصل الرابع : طرق نشر الموقع على الأنترنت 


اولا لرفع الموقع على الأنترنت نختار قائمة ملف ثم نشر الموقع 
وبيظهر عندك طرق رفع الموقع انتا تتعامل معاها بسهولة جدا 
اهم شئ هو نشر الموقع بمعنى رفعة على جوجل وجلب الزوار لة 
وارشفتة وغيرها 


هناك طريقتين لنشر الموقع 


الطريقة الاولى إضافة الموقع يدويا عن طريق مواقع محركات البحث 
-: كتالي 


عن طريق ء[عمهمع إضافة موقعك في محرك البحث قوقل 
-: الرابط التالي 


http://www.gsoogle.com/intl/ar/add_url.html 
عن طريق الرابط 00طهر إضافة موقعك في محرك البحث ياهو‎ 
التالي‎ :- 


http://submit.search.yahoo.com/free/request 


تاك اانا أكافة الم ة 


